<template>
  <el-container>
    <el-header  style="height: 100%;border: 1px">
      <el-menu class="el-menu-demo" mode="horizontal" :router="true">
        <el-col :span="6" style="margin: 0px 43% 0px 10px ">
          <h2 style="font-size: 35px">:D豆嗲</h2>
        </el-col>
        <el-menu-item index="/homepage.html" style="padding: 40px 5px 62px 5px">首页</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/allGoods.html" style="padding: 40px 5px 62px 5px">全部商品</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/order.html" style="padding: 40px 5px 62px 5px">我的订单</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/star.html" style="padding: 40px 5px 62px 5px">我的收藏</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/shopping.html" style="padding: 40px 5px 62px 5px">购物车</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/login.html" style="padding: 40px 5px 62px 5px">登录</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="8" :offset="8">
          <div class="show" >
            <div class="div1">
              <el-card>
                <br>
                <h1 style="text-align: center">账号登陆</h1>
                <br>
                <br>
                <el-form ref="loginForm" :model="form" style="text-align: center" :rules="rules">
                  <el-form-item prop="account">
                    <el-input v-model="form.account" placeholder="账号"></el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" placeholder="密码"></el-input>
                  </el-form-item>
                  <br><br>
                  <el-form-item prop="type">
                    <el-radio-group v-model="form.type">
                      <el-radio label="0">买家</el-radio>
                      <el-radio label="1" >商家</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <br>
<!--                  <el-form-item prop="rem">-->
<!--                    <el-checkbox-group v-model="form.rem">-->
<!--                      <el-checkbox label="记住我" ></el-checkbox>-->
<!--                    </el-checkbox-group>-->
<!--                  </el-form-item>-->
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                    <el-button @click="onReset">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </div>
        </el-col>
        <div style="height: 110px"></div>
      </el-row>
  </el-main>
    <el-footer  style="padding:0px 0px 350px 0px">
      <el-row>
        <img width="35px" height="35px" style="margin: 50px 0px 0px -60%" src="../img/many.png">
        <h1 style="color: white;margin: -70px 42% 0px 0px ">品类齐全，轻松购物</h1>
        <el-col :span="2" style="margin: -50px 0px 0px 37% ">
          <img width="35px" height="35px" src="../img/fast.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0% 0px 0px">多仓直发，极速配送</h1>
        <el-col :span="2" style="margin: -53px 0px 0px 200px ">
          <img width="33px" height="33px" src="../img/good.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0px 0px 40%">正品好货，精致服务</h1>
      </el-row>
      <el-divider></el-divider>
      <img width="50px" height="50px" src="../img/touxiang.png">
      <el-breadcrumb>
        <el-breadcrumb-item style="font-size: 18px;margin-left: 30px">关于我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">联系我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">人才招聘</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">商家入驻</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">广告服务</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">手机京东</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">友情链接</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">销售联盟</el-breadcrumb-item>
      </el-breadcrumb>
      <h1 style="color: #8a8a8a;font-size: 15px;margin: 0px 20px 0px 0px">Copyright &copy; 2021 :D豆爹版权所有</h1>
    </el-footer>
  </el-container>
</template>

<script>
import loginApi from "@/http/loginApi";

export default {
name: "Login",
  data() {
    return {
      form: {
        account: '',
        password:'',
        type:0,
        rem:1
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          alert('submit!');
          //发起登录请求
          loginApi.login(this.form).then(res => {
            console.log("code:",res.data);
            if (res.data.code == 200){
              //登陆成功
              //修改vuex中的store变量type中的值
              // this.$store.commit('SET_TYPE', this.form.type);
              // this.$store.commit('SET_USERINFO', {id:1});
              sessionStorage.setItem("token",res.data.token);
              if (this.form.type == "0"){
                this.$router.replace('/allGoods.html');
              }else if (this.form.type == "1"){
                this.$router.replace('/storeAdmin.html');
              }else{
                this.$message.error(res.data.msg);
                return false;
              }
            }else{
              this.$message.error(res.data.msg);
              return false;
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    onReset() {
      this.$refs['loginForm'].resetFields();
    }
  }
}
</script>

<style scoped>
body{
  font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}
/*html,body{*/
/*  margin: 0;*/
/*}*/
.div1 {
  position: absolute;
  right: 0;
  top: 28%;
  transform: translate(-25%, -25%);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}
.el-card{
  width: 450px;
  height: 500px;
}

.show{
  width: 100%;
  height: 550px;
  background-color: #a2aec7;
  position: absolute;
  transform: translate(0%, 9%);
  left: 0;
  background-image: url("https://img.alicdn.com/imgextra/i1/196993935/O1CN017VMPAq1ewHDRYexfP_!!196993935.jpg");
}

.el-divider{
  display: block;
  height: 1px;
  width: 100%;
  margin: 12px 0px 25px 0px;
}

a{
  text-decoration: none;
}
.el-header .el-menu {
  max-width: 1350px;
  margin: 0 auto;
}
.el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: 0px 0px 600px 0px;
}
.el-footer {
  background-color: #3d3d3d;
  text-align: center;
  line-height: 60px;
}
.el-footer .el-menu.el-menu--horizontal {
  border-bottom: solid 0px #e6e6e6;
}

.el-footer .el-breadcrumb__inner {
  color: #8a8a8a;
}
.el-footer .el-breadcrumb {
  font-size: 14px;
  line-height: 1;
  margin-left: 25%;
}
.el-footer .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 400;
  color: #8a8a8a;
  cursor: text;
}
</style>